<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Test Dashed Stroke</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="gfxRenderer:'canvas',async:true, isDebug:true"></script>
		<script type="text/javascript">
			require([
				"dojo/ready",
				"dojo/_base/array",
				"dojo/dom",
				"dojo/on",
				"dojox/gfx",
				"dojox/gfx/matrix",
				"dojox/gfx/Moveable",
				"dojox/gfx/svg"],
				function(ready, array, dom, on, gfx, matrix, Moveable, svg) {

				function makeScene(surface, renderer){
					surface.createText({x:250,y:50,text:renderer})
							.setFill("black")
							.setFont({family:'sans-serif', size:'40pt'})
					;

					surface.createCircle({cx:130,cy:200,r:70}).setStroke({width:2, style:"dashdot", color:'blue'}).setFill("rgba(162,205,90,.3)");
					new Moveable(surface.createLine({x1:200,y1:200,x2:400,y2:300}).setStroke({width:2, style:"dashdot", color:'black'}));
					surface.createRect({x:200,y:200}).setFill("rgba(162,205,90,.3)").setStroke({width:6, style:"longdash", color:'black'});
					surface.createRect({x:300,y:50,r:10}).setStroke({width:6, style:"dashdot", color:'red'}).setFill("rgba(162,205,90,.3)");
					new Moveable(surface.createEllipse({cx:300,cy:400, rx:120, ry:80}).setStroke({width:2, style:"dashdot", color:'black'}).setFill("rgba(162,205,90,.3)"));

					// MoveTo + lineTo combine in one M xx,xx,...,xxx [Absolute]
					surface.createPath()
							.setStroke({color:'rgb(110,139,61)', width:4, style:'longdash'})
							.setFill('rgba(162,205,90,.3)')
							.setShape({path:"M 10.499686,210,100.174931,378.56990,40,290Z"})
					;
					// MoveTo + lineTo combine + lineTo  [Relative]
					surface.createPath()
							.setStroke({color:'rgb(110,139,61)', width:4, style:'longdash'})
							.setFill('rgba(162,205,90,.3)')
							.setShape({path:"m 300.499686,210,130,50,40,90 l 90,-150 Z"})
					;

					//PI
					surface.createPath()
							.setStroke({color:'rgb(110,139,61)', width:4, style:'shortdashdot'})
							.setFill('rgba(162,205,90,.3)')
							.setShape({path:"M 10.499686,177.03840 L 31.174931,178.56990 C 52.615925,154.32116 61.039171,82.595924 187.38789,96.634671 C 182.79339,403.95560 48.021426,436.37234 56.444675,499.41907 C 59.507674,535.15406 87.840417,557.10556 118.47041,558.38181 C 215.21014,555.06356 210.87089,424.63084 240.99038,95.868921 L 365.80760,95.868921 C 359.17110,211.75239 341.04836,327.63586 339.00636,441.22208 C 340.53786,516.77606 386.48285,557.10556 446.97708,557.61606 C 546.52456,560.93431 577.92030,444.79558 577.92030,395.27709 L 556.47931,395.27710 C 554.43731,436.11709 534.78306,465.47083 492.92207,467.25758 C 378.82535,468.78908 441.61683,266.63113 442.38258,97.400421 L 577.92030,98.166171 L 577.15455,11.636437 C 13.807491,8.9075799 85.312284,-2.1366151 10.499686,177.03840 z"})
					;

					surface.createPath()
							.setStroke({color: "black", style:'longdash', width:3})
							.setFill('rgba(162,205,90,.3)')
							.setShape({path:"M400 100 500 100 500 200Q500 250 425 175T400 100z"})
					;
					new Moveable(surface.createPolyline({points:[50,50,80,130,160,90,110,270]}).setStroke({width:4, style:"dashdot", color:'black'}));
				}

				ready(function(){
					var surface = gfx.createSurface(dom.byId("gfx_holder"), 600, 550);
					makeScene(surface, "Canvas");
					gfx.switchTo(svg);
					surface = gfx.createSurface(dom.byId("svg_holder"), 600, 550);
					makeScene(surface, "SVG");
					var hasSetLineDash = typeof document.createElement("canvas").getContext("2d").setLineDash  == "function";
					dom.byId("holder").innerHTML = "Native dashed stroke: " + hasSetLineDash+"</br>";
				});
			});

		</script>
	</head>
	<body style="font-family:sans-serif;font-size:12pt">
		This test illustrates dashed stroke support for canvas renderer. The gfx implementation uses the native implementation if it is provided by the browser, or a custom implementation otherwise.<br/>
		The left drawing uses the Canvas renderer. The right drawing uses the SVG Renderer for reference purpose.</br>
		<span id="holder" style="color: red"></span>
		<div id="gfx_holder" style="width: 600px; height: 550px; border: solid;display:inline-block"></div>
		<div id="svg_holder" style="width: 600px; height: 550px; border: solid;display:inline-block"></div>
	</body>
</html>